<script setup>

import {User} from "@element-plus/icons-vue";
import {ref} from "vue";


const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)

}
const qjxOpenMenu=ref(["1","2","3","4"])
//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);


</script>

<template>

  <div style="width: 1154px;margin: 0 auto;position: relative; color: rgb(51, 51, 51)" >
    <div style="margin-top: 20px;">
    </div>
    <el-row :gutter="20">

      <el-col :span="5">
        <div style="width: 100%; position: relative;" >
          <el-button  type="primary" link @click="$router.push('/center/home')" style="margin-left: 150px">我的首页</el-button>
        </div>
        <el-menu
            :default-openeds="qjxOpenMenu"
            @open="handleOpen"
            @close="handleClose"
            active-text-color="#00cf97"
            style="min-height: 1000px;"
            router
        >

          <el-sub-menu index="1">
            <template #title>
              <span class="qjx-menu-title">我的订单</span>
            </template>
              <el-menu-item index="/center/order">订单管理</el-menu-item>

          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <span class="qjx-menu-title">我的资产</span>
            </template>
<!--            <el-menu-item index="/center/wallet">钱包</el-menu-item>-->
            <el-menu-item index="/center/transactionHistory">交易记录</el-menu-item>

          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <span class="qjx-menu-title">个人中心</span>
            </template>
            <el-menu-item index="/center/userInfo">用户信息</el-menu-item>

          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <span class="qjx-menu-title">认证中心</span>
            </template>
            <el-menu-item index="/center/authentication">证件认证</el-menu-item>
            <el-menu-item index="/center/driverlicense">驾照认证</el-menu-item>

          </el-sub-menu>

        </el-menu>

      </el-col>
      <el-col :span="19">
        <router-view style="margin-top: 20px"/>
      </el-col>
    </el-row>

  </div>








<!--  <div style="width: 1024px;margin: 0 auto;">-->

<!--    <div style="display: flex;align-items: center;margin-top: 20px;float: left">-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-menu-->
<!--              default-active="2"-->
<!--              background-color="#00CF97"-->
<!--          >-->
<!--            <el-sub-menu style="width: 170px;">-->
<!--              <template #title>-->
<!--                <el-icon style="color: white">-->
<!--                  <user/>-->
<!--                </el-icon>-->
<!--                <span style="display: inline-block;color: white">个人中心</span>-->
<!--              </template>-->
<!--              <el-menu-item-group>-->
<!--                <el-menu-item style="color:white;">用户信息</el-menu-item>-->
<!--              </el-menu-item-group>-->
<!--            </el-sub-menu>-->
<!--          </el-menu>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->
<!--    <el-card :body-style="{ padding: '0px' }"-->
<!--             style="margin-left: 190px; margin-top: 20px; margin-bottom: 60px;background-color: #00CF97;">-->
<!--      <el-form>-->
<!--        <el-row>-->
<!--          <el-col>-->
<!--            <p style="margin-left: 15px;color: white">用户信息</p>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form>-->

<!--      <el-form ref="form2" label-width="90px" style="background-color: white; padding: 15px;">-->
<!--        <el-row :gutter="30" style="padding: 15px;">-->
<!--          <el-col :span="12" >-->
<!--            <el-form-item label="姓名：">-->
<!--              <el-input v-model="input" placeholder="请输入姓名"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="生日：">-->
<!--              <el-input v-model="input" placeholder="请输入生日"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--        </el-row>-->
<!--        <el-row :gutter="30" style="padding: 15px;">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="邮箱：">-->
<!--              <el-input v-model="input" placeholder="请输入邮箱"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="手机号：">-->
<!--              <el-input v-model="input" placeholder="请输入手机号"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

<!--        <el-row :gutter="30" style="padding: 15px;">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="证件号码：">-->
<!--              <el-input v-model="input" placeholder="请输入证件号码"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--          <el-col :span="12">-->
<!--            <el-form-item label="证件类型：">-->
<!--              <el-select placeholder="请选择证件类型" clearable>-->
<!--                <el-option value="10" label="居民身份证"></el-option>-->
<!--                <el-option value="20" label="临时身份证"></el-option>-->
<!--                <el-option value="30" label="港澳居民来往内地通行证"></el-option>-->
<!--                <el-option value="40" label="台湾居民来往大陆通行证"></el-option>-->
<!--                <el-option value="50" label="外国人居留证"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <div style="margin: 10px auto;text-align: center">-->
<!--          <el-button style="background-color: #00CF97; color: white" @click="dialogVisible=true">点击修改</el-button>-->
<!--        </div>-->
<!--      </el-form>-->
<!--    </el-card>-->
<!--  </div>-->
</template>

<style scoped>
.qjx-menu-title{
  font-size: 20px;
  font-weight: 700;
}
</style>